var Calendar = function(option) {
    this.init(option);
};

Calendar.prototype.init = function(option) {
    this.weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    this.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    this.days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    this.date = new Date();
    this.currentDay = this.date.getDate(); //当前日期
    this.wrapDom=option.id;

    /*覆盖默认日期*/
    if(option && option.year){
       this.date.setYear(option.year);
    }
    if(option && option.month){
       this.date.setMonth(option.month);
    }

    this.year = this.date.getFullYear();
    this.month = this.date.getMonth();

    this.date.setDate(1);
    this.week = this.date.getDay();
    this.monthDays;
    this.rows = Math.floor((this.week + this.days[this.month] + 6) / 7); //行数,找规律 例如：1号是周日
    this.yearFlag = 0;
    this.f = 1;
    if ((this.year % 4 == 0 && this.year % 100 != 0) || (this.year % 400 == 0)) {
        this.yearFlag = 1;
    } else {
        this.yearFlag = 0;
    }
    if (this.month == 1) //二月份
    {
        this.monthDays = this.days[this.month] + this.yearFlag;
    } else {
        this.monthDays = this.days[this.month];
    }
    //开始渲染
    if(!document.getElementById("tb")){
         this.render();
    }
   
    if (!document.getElementById("calendar-month-select")) {
        this.renderThead();
    } else {
        this.syncSelect("calendar-month-select",this.month);
        this.syncSelect("calendar-year-select",this.year);
    }

    this.renderTbody();

    

};
Calendar.prototype.syncSelect = function(id,num) {
  var dom=document.getElementById(id).getElementsByTagName("option");
  console.log(dom)
   for(var i=0;i<dom.length;i++){
        if(dom.value==num){
            dom[i].setAttribute("selected","selected");
        }
        else{
           dom[i].removeAttribute("selected");
        }
   }
}
Calendar.prototype.renderThead = function() {
    var template = "";
    template += '<tr><td colspan="3"><select id="calendar-year-select">';
    //年份选择
    for (var v = 1970; v < 2117; v++) {
        if (v == this.year) {
            template += '<option selected = "selected">' + v + '</option>';
        } else {
            template += '<option >' + v + '</option>';
        }
    }

    template += '</select>';
    template += '年</td>';
    //月份选择
    template += '<td colspan="2"><select id="calendar-month-select">';
    for (var v = 1; v <= 12; v++) {
        if (v == this.month + 1) {
            template += '<option selected = "selected">' + v + '</option>';
        } else {
            template += '<option >' + v + '</option>';
        }
    }
    template += '</select>月</td><td colspan="2"></td></tr>';
    template += '<tr>';
    //日期布局
    for (var index in this.weeks) {
        template += "<td>" + this.weeks[index] + "</td>";
    }

    var thead = document.createElement("thead");
    thead.innerHTML = template;
    document.getElementById("calendar-table").appendChild(thead);


    this.selectMonth();
    this.selectFullYear();

}
Calendar.prototype.renderTbody = function() {
  console.log(this)
  console.log(document.getElementById(this.wrapDom).getElementsByTagName("tbody")[0])
  if(document.getElementById(this.wrapDom).getElementsByTagName("tbody")[0]){
    document.getElementById("calendar-table").removeChild(document.getElementsByTagName("tbody")[0]);
  }
    var template = "";
    for (var i = 0; i < this.rows; i++) {
        template += "<tr>";
        for (var j = 0; j < 7; j++) {
            if (i == 0 && j < this.week) {
                template += "<td>";
            } else {
                if (this.f > this.monthDays) {
                    break;
                }
                template += "<td id=" + this.f + ">" + this.f;
                this.f++;

            }
            template += "</td>";
        }
        template += "</tr>";
    }
    var tbody = document.createElement("tbody");
    tbody.innerHTML = template;
    document.getElementById("calendar-table").appendChild(tbody);
     var current=new Date();
    console.log(this.year==current.getFullYear(),this.month==current.getMonth(),current.getDate())
    if(this.year==current.getFullYear()&&this.month==current.getMonth()&&document.getElementById(current.getDate())){
        document.getElementById(current.getDate()).style.background="red";
    }
}
Calendar.prototype.render = function() {
    var template = "";
    template += '<div id="date"><table id="calendar-table" class="calendar-table"></table></div>';
    document.getElementById("rili").innerHTML = template;
}

Calendar.prototype.selectMonth = function() {
    var _this = this;
    document.getElementById("calendar-month-select").onchange = function() {
        _this.init({
            year: _this.year,
            month: this.value - 1,
            noRenderThead: true,
              id: _this.wrapDom
        })
    };
}
Calendar.prototype.selectFullYear = function() {
    var _this = this;
    document.getElementById("calendar-year-select").onchange = function() {
        _this.init({
            year: this.value,
            month: _this.month,
            noRenderThead: true,
            id: _this.wrapDom
        })
    };
}
